<template>
  <div class="news-list-container">
    <el-card shadow="never">
      <template #header>
        <div class="header-actions">
          <h2>院内新闻</h2>
          <el-button type="primary" @click="handlePublish">
            <el-icon><Edit /></el-icon>
            发布新闻
          </el-button>
        </div>
      </template>
      
      <div class="news-content">
        <el-row :gutter="20">
          <el-col :span="16">
            <!-- 新闻列表 -->
            <div class="news-items">
              <div v-for="news in newsList" :key="news.id" class="news-item">
                <div class="news-cover">
                  <img :src="news.cover || '/placeholder.jpg'" :alt="news.title" />
                </div>
                <div class="news-content">
                  <h3 @click="handleViewDetail(news)">{{ news.title }}</h3>
                  <p class="news-summary">{{ news.summary }}</p>
                  <div class="news-meta">
                    <span class="author">作者：{{ news.author }}</span>
                    <span class="date">发布时间：{{ news.publishDate }}</span>
                    <span class="views">阅读量：{{ news.views }}</span>
                  </div>
                  <div class="news-actions">
                    <el-button type="primary" size="small" @click="handleViewDetail(news)">查看</el-button>
                    <el-button type="warning" size="small" @click="handleEdit(news)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(news)">删除</el-button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                layout="prev, pager, next"
                @current-change="handlePageChange"
              />
            </div>
          </el-col>
          
          <el-col :span="8">
            <!-- 侧边栏 -->
            <div class="sidebar">
              <!-- 热门新闻 -->
              <el-card shadow="hover" class="hot-news">
                <template #header>
                  <span>热门新闻</span>
                </template>
                <div class="hot-news-list">
                  <div v-for="(item, index) in hotNews" :key="item.id" class="hot-news-item">
                    <span class="rank">{{ index + 1 }}</span>
                    <span class="title" @click="handleViewDetail(item)">{{ item.title }}</span>
                  </div>
                </div>
              </el-card>
              
              <!-- 新闻分类 -->
              <el-card shadow="hover" class="news-categories">
                <template #header>
                  <span>新闻分类</span>
                </template>
                <div class="category-list">
                  <el-tag 
                    v-for="category in categories" 
                    :key="category"
                    @click="handleCategoryFilter(category)"
                    class="category-tag"
                  >
                    {{ category }}
                  </el-tag>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'

const router = useRouter()

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(25)

const newsList = ref([
  {
    id: 1,
    title: '医院举办慉病防治知识讲座',
    summary: '为提高市民对慉病的认知和防治意识，我院将于本周五下午举办慉病防治知识公益讲座...',
    author: '宣传科',
    publishDate: '2024-01-15',
    views: 1234,
    cover: ''
  },
  {
    id: 2,
    title: '新引进的高端医疗设备正式投入使用',
    summary: '经过严格的调试和测试，我院新引进的高端医疗设备已通过验收，正式投入使用...',
    author: '医学装备科',
    publishDate: '2024-01-14',
    views: 856,
    cover: ''
  },
  {
    id: 3,
    title: '医院成功举办一年一度的职工体检活动',
    summary: '为保障职工身体健康，提高工作效率，我院组织开展了一年一度的职工体检活动...',
    author: '人事科',
    publishDate: '2024-01-13',
    views: 623,
    cover: ''
  }
])

const hotNews = ref([
  { id: 1, title: '医院获得省级医疗质量奖' },
  { id: 2, title: '新冠疫苗接种通知' },
  { id: 3, title: '医院精神文明建设取得新成果' }
])

const categories = ref(['医院动态', '通知公告', '学术交流', '健康科普', '医疗新闻'])

const handlePublish = () => {
  router.push('/news/publish')
}

const handleViewDetail = (news: any) => {
  router.push(`/news/detail/${news.id}`)
}

const handleEdit = (news: any) => {
  ElMessage.info(`编辑新闻: ${news.title}`)
}

const handleDelete = (news: any) => {
  ElMessage.info(`删除新闻: ${news.title}`)
}

const handlePageChange = (page: number) => {
  currentPage.value = page
}

const handleCategoryFilter = (category: string) => {
  ElMessage.info(`筛选分类: ${category}`)
}
</script>

<style lang="scss" scoped>
.news-list-container {
  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h2 {
      margin: 0;
      color: #303133;
    }
  }
  
  .news-items {
    .news-item {
      display: flex;
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      transition: all 0.3s ease;
      
      &:hover {
        background: #f8f9fa;
      }
      
      .news-cover {
        width: 120px;
        height: 80px;
        margin-right: 16px;
        flex-shrink: 0;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
          background: #f5f5f5;
        }
      }
      
      .news-content {
        flex: 1;
        
        h3 {
          margin: 0 0 8px 0;
          font-size: 18px;
          color: #303133;
          cursor: pointer;
          
          &:hover {
            color: #409eff;
          }
        }
        
        .news-summary {
          margin: 0 0 12px 0;
          color: #606266;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .news-meta {
          margin-bottom: 12px;
          font-size: 12px;
          color: #909399;
          
          span {
            margin-right: 16px;
          }
        }
        
        .news-actions {
          display: flex;
          gap: 8px;
        }
      }
    }
  }
  
  .pagination-container {
    text-align: center;
    margin-top: 20px;
  }
  
  .sidebar {
    .hot-news, .news-categories {
      margin-bottom: 20px;
    }
    
    .hot-news-list {
      .hot-news-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .rank {
          width: 24px;
          height: 24px;
          background: #409eff;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          margin-right: 12px;
          flex-shrink: 0;
        }
        
        .title {
          flex: 1;
          color: #606266;
          cursor: pointer;
          font-size: 14px;
          
          &:hover {
            color: #409eff;
          }
        }
      }
    }
    
    .category-list {
      .category-tag {
        margin: 4px 8px 4px 0;
        cursor: pointer;
        
        &:hover {
          background: #409eff;
          color: white;
        }
      }
    }
  }
}
</style>